<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="user.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="user.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
          v-model="confirmPassword"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="确认密码"
          :rules="[
              { required: true, message: '请填写密码' },
              { validator: confirm, message: '两次输入的密码不一致' }
          ]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <div class="Gap"></div>
      <van-button round block type="primary" @click="register">
        注册
      </van-button>
      <div class="Gap"></div>
      <van-button round block type="primary" to="/user/login">
        返回
      </van-button>
    </div>
  </van-form>
</template>

<script>
import { showDialog } from "vant";
import { showNotify } from "vant";

export default {
  name: "registerLogin",
  data(){
    return{
      user: {
        username:'',
        password:'',
      },
      confirmPassword: ''
    }
  },
  methods: {
    confirm() {
     if (this.user.password != this.confirmPassword){
       return false;
     } else {
       return true;
     }
  },
    register() {
      this.$axios.get('/ele_server_war/user/resisterLogin',{
        params: this.user
      }) .then(({ data : res }) => {
          if (res.status == 2003){
            showDialog({
              title: '请重新输入',
              message: '账号已存在，请重新输入',
              theme: 'round-button'
            }).then(() => {})
          } else {
            showNotify({type: 'success',message: '注册成功'})
            this.$router.push('/user/login')
          }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
 .Gap
   height: 15px;

</style>